<template>
  <div id="vue-admin-beautiful">
    <router-view />
    <Notice />
  </div>
</template>
<script>
  // import { getIotControl } from "@/api/bedList";
  import Push from 'push.js'
  // import mixins from '@/utils/appmixins.js';
  // import mixinstest from '@/utils/mixinstest.js';
  import { mapActions } from "vuex";
  import Notice from "@/components/Notice/Notice.vue";
  import {
    getAccessToken,
  } from "@/utils/accessToken";
  export default {
    name: "App",
    // mixins: [mixins],
    components: {
      Notice
    },
    mounted() {
    },
    created() {
      this.$router.beforeEach((to, from, next) => {
          next();
          if(to.path == '/login') {
            this.setNoticeshow(false);
            this.$ws.wsClose();
            this.$ws.$ws = null;
            // 人脸识别
            this.$face.wsClose();
            this.$face.$ws = null;
          } else{
            if(getAccessToken()){
              const self = this;
              if(!this.$ws.$ws) {
                // console.log(this.$ws)
                this.$ws.createWS();
              }
              if(!this.$face.$ws){
                // console.log(this.$face)
                let userinfo = localStorage.getItem("userdata") || {}
                if(userinfo) {
                	userinfo = JSON.parse(userinfo);
                  const mathUserid = Math.floor(Math.random() * (1000 - 1)) + 1;
                  if(userinfo.hasOwnProperty('facedev') && userinfo.facedev.length != 0){
                      userinfo.facedev.forEach(item => {
                         self.$face.createWS({ mathUserid, device_sn: item.device_sn })
                      })
                  }
                }
              }
            }
            this.setNoticeshow(true);
          }

      });
    },
    destroyed(){

    },
    methods: {
      ...mapActions({
        setNoticeshow: "websocket/setNoticeshow",
      }),
    }
  };
</script>
<style>
  .clearfix::after {
    display: block;
    height: 0;
    clear: both;
    content: "\20";
  }

  .clearfix {
    zoom: 1;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .el-dialog__header {
    color: #fff;
    background: rgb(64, 158, 255);
  }

  .el-dialog__title {
    color: #fff !important;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }
  .notificiation-wrap{
    min-width: 400px;
    width: 400px !important;
  }
  .el-notification__group{
    width: 100%;
  }

</style>
<style scoped>
  #vue-admin-beautiful {
    width: 100%;
    height: 100%;
  }
</style>
